<h3>{{ 'app.password.reset' | i18n }}</h3>
<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  @if (error) {
    <nz-alert [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg" />
  }
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'validation.email.required' | i18n">
      <nz-input-group nzSize="large" nzPrefixIcon="mail">
        <input nz-input formControlName="email" placeholder="邮箱" [disabled]="true" [(ngModel)]="email" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'validation.username.required' | i18n">
      <nz-input-group nzSize="large" nzPrefixIcon="user">
        <input nz-input formControlName="username" placeholder="用户名" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'validation.password.required' | i18n">
      <nz-input-group
        nzSize="large"
        nzPrefixIcon="lock"
        nz-popover
        nzPopoverPlacement="right"
        nzPopoverTrigger="focus"
        [(nzPopoverVisible)]="visible"
        nzPopoverOverlayClassName="register-password-cdk"
        [nzPopoverOverlayStyle]="{ 'width.px': 240 }"
        [nzPopoverContent]="pwdCdkTpl"
      >
        <input nz-input type="password" formControlName="password" placeholder="密码" />
      </nz-input-group>
      <ng-template #pwdCdkTpl>
        <div style="padding: 4px 0">
          <ng-container>
            @switch (status) {
              @case ('ok') {
                <div class="success">{{ 'validation.password.strength.strong' | i18n }}</div>
              }
              @case ('pass') {
                <div class="warning">{{ 'validation.password.strength.medium' | i18n }}</div>
              }
              @default {
                <div class="error">{{ 'validation.password.strength.weak' | i18n }}</div>
              }
            }
          </ng-container>
          <div class="progress-{{ status }}">
            <nz-progress [nzPercent]="progress" [nzStatus]="passwordProgressMap[status]" [nzStrokeWidth]="6" [nzShowInfo]="false" />
          </div>
          <p class="mt-sm">{{ 'validation.password.strength.msg' | i18n }}</p>
        </div>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="confirmErrorTip">
      <nz-input-group nzSize="large" nzPrefixIcon="lock">
        <input nz-input type="password" formControlName="confirm" placeholder="确认密码" />
      </nz-input-group>
      <ng-template #confirmErrorTip let-i>
        @if (i.errors?.required) {
          <ng-container>{{ 'validation.confirm-password.required' | i18n }}</ng-container>
        }
        @if (i.errors?.equar) {
          <ng-container>{{ 'validation.password.twice' | i18n }}</ng-container>
        }
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'validation.verification-code.required' | i18n">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="13">
          <nz-input-group nzSize="large" nzPrefixIcon="code">
            <input nz-input formControlName="captcha" placeholder="验证码" />
          </nz-input-group>
        </nz-col>
      </nz-row>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="http.loading" class="submit">
      {{ 'app.password.reset' | i18n }}
    </button>
  </nz-form-item>
</form>
